<template>
    <view>
        <view class="u-flex">
            <input type="text" v-model="inp"> <button @click="add">确认</button>
        </view>
        <u-table>
		<u-tr >
			<u-th>名称</u-th>
			<u-th>操作</u-th>
		</u-tr>
		<u-tr v-for="(item,index) in list" :key="item.name">
			<u-td>{{item.name}}</u-td>
			<u-td>
                <view class="u-flex">
                    <button @click="tareFn(-1,index)">-</button>
                    {{item.count}}
                    <button @click="tareFn(1,index)">+</button>
                </view>
            </u-td>
		</u-tr>
		
	</u-table>
    </view>
</template>

<script>
export default {
    data(){
        return{
            
            inp:''
        }
    },
    computed:{
        list(){
            console.log(this.$store);
            return this.$store.state.list
            
        }
    },
    methods:{
        add(){
            // 数组 findIndex 下标 判断  v.name === this.inp 简写   查找目标元素，找到就返回元素的位置，找不到就返回-1。
            const index = this.list.findIndex((v)=> v.name === this.inp)
            const list = this.list
            // 判断 重名就加数量
            if(index === -1){
                // 找不到 相应的下标就添加  添加的是对象
                list.push({name:this.inp,count:1})
            }else{
                // 找到相应的下标就 加数量
                this.list[index].count++
            }
            this.$store.commit("addCount", list)
        },
        // 点击  加加  减减 数量改变
        tareFn(num,index){
            const list = this.list
            list[index].count += num
            this.$taore.commit("addCount", list)
        }
    }
}
</script>

<style lang="scss">
input{
    border: 1px solid #000;
    height: 70rpx;
    width: 500rpx;
}
.mate{
    border: 1px solid #999;
    height: 50vh;
    margin: 10rpx;
}
</style>